<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar" style="padding-left:15px;">
      <el-form :inline="true" :model="queryFiteris" :size="size" :rules="filtersRules">
        <el-row style="text-align: left;" class="search-input">
          <el-form-item label="商家名称：" label-width="96px">
            <el-input v-model="queryFiteris.merchantName" placeholder="商家名称"></el-input>
            <!-- <el-select v-model="queryFiteris.merchantName" placeholder="商家名称" style="width:200px">
              <el-option label="录屏商家02" value="1">录屏商家02</el-option>
              <el-option label="育学园-商城" value="1">育学园-商城</el-option>
              <el-option label="张小二服饰" value="1">张小二服饰</el-option>
              <el-option label="育学园-商城" value="1">育学园-商城</el-option>
            </el-select>-->
          </el-form-item>
          <el-form-item label="状态：" label-width="100px">
            <!-- <el-input v-model="filters.type" placeholder="模板分类"></el-input> -->
            <!-- <el-select :model="queryFiteris.status" placeholder="状态" style="width:100%">
                <el-option
                v-for="item in statusOption"
                :key="item.status"
                :label="item.label"
                :value="item.status">
                </el-option>
            </el-select>-->
            <el-select v-model="queryFiteris.status" placeholder="状态" style="width:200px">
              <el-option label="有效" value="0"></el-option>
              <el-option label="无效" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="合同编码：" prop="code">
            <el-input v-model="queryFiteris.code" placeholder="合同编码" style="width:200px"></el-input>
          </el-form-item>
          <!-- <el-form-item>
            <el-input v-model="filters.name" placeholder="模板名称" style="width:200px"></el-input>
          </el-form-item>-->
          <el-form-item label="生效时间起：" prop="startTimeStartDate">
            <el-date-picker
              v-model="queryFiteris.startTimeStartDate"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="合同生效时间起"
              style="width:200px"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="生效时间止：" prop="startTimeEndDate">
            <el-date-picker
              v-model="queryFiteris.startTimeEndDate"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="合同生效时间止"
              style="width:200px"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="供应商编码：" prop="supplierCode">
            <el-input v-model="queryFiteris.supplierCode" placeholder="供应商编码" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="供应商名称：" prop="supplierName">
            <el-input v-model="queryFiteris.supplierName" placeholder="供应商名称" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="合同属性：">
            <!-- <el-input v-model="filters.type" placeholder="模板分类"></el-input> -->
            <el-select v-model="queryFiteris.type" placeholder="合同属性" style="width:200px">
              <el-option label="自采合同" value="1"></el-option>
              <el-option label="经销合同" value="2"></el-option>
              <el-option label="代销合同" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="失效时间起：" prop="endTimeStartDate">
            <el-date-picker
              v-model="queryFiteris.endTimeStartDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="合同失效时间起"
              style="width:200px"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="失效时间止：" prop="endTimeEndDate">
            <el-date-picker
              v-model="queryFiteris.endTimeEndDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="合同失效时间止"
              style="width:200px"
            ></el-date-picker>
          </el-form-item>
        </el-row>
        <el-row class="search-button noboder">
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
              @click="findPage(dataForm)"
            />
          </el-form-item>
          <el-form-item>
            <kt-button
              icon="fa fa-refresh"
              :label="$t('action.reset')"
              @click="reset"
              type="primary"
            />
          </el-form-item>
        </el-row>
        <el-row class="search-button">
          <el-form-item>
            <kt-button
              icon="fa fa-plus"
              :label="$t('action.add')"
              type="primary"
              @click="handleAdd"
            />
          </el-form-item>
          <el-form-item>
            <kt-button
              icon="fa fa-hand-pointer-o"
              label="导出"
              @click="downloadExcel"
              type="primary"
            />
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-hand-pointer-o" label="重启" @click="confim" type="primary"/>
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-hand-pointer-o" label="续签" @click="confim" type="primary"/>
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-hand-pointer-o" label="延期" @click="confim" type="primary"/>
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-hand-pointer-o" label="变更" @click="confim" type="primary"/>
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-pencil" label="审核" @click="confim" type="primary"/>
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-hand-pointer-o" label="暂停" @click="confim" type="primary"/>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <el-row class="t_r">
      <el-button-group>
        <el-tooltip content="刷新" placement="top">
          <el-button icon="fa fa-refresh" @click="findPage(null)"></el-button>
        </el-tooltip>
        <el-tooltip content="列显示" placement="top">
          <el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
        </el-tooltip>
        <el-tooltip content="导出" placement="top">
          <el-button icon="fa fa-file-excel-o" @click="downloadExcel"></el-button>
        </el-tooltip>
      </el-button-group>
    </el-row>
    <!-- <div class="toolbar" style="float:right;padding-right:15px;">
      <table-column-filter-dialog
        ref="tableColumnFilterDialog"
        :columns="columns"
        @handleFilterColumns="handleFilterColumns"
      ></table-column-filter-dialog>
    </div> -->
    <!--表格内容栏-->
    <!-- <CyTable
      :height="350"
      :data="pageResult"
      :columns="filterColumns"
      @findPage="findPage"
      @handleDelete="handleDelete"
      @handleEdit="handleDetail"
      ref="CyTable"
    ></CyTable> -->

    <el-table
          :data="filters.res.rows"
          :header-cell-style="{ 'color': '#FFF','background-color': '#409EFF','text-align': 'center'}"
          :highlight-current-row="true"
          :max-height="1500"
          :size="size"
          v-loading="loading">

        <el-table-column align="center" prop="name" label="合同名称" width="120"></el-table-column>
        <el-table-column align="center" prop="supplierCode" label="供应商编码" width="120"></el-table-column>
        <el-table-column align="center" prop="supplierName" label="供应商名称" width="120"></el-table-column>
        <el-table-column align="center" prop="busiType" label="合同类型" width="120">
          <template slot-scope="scope">
             {{formatbusiType(scope.row,null,scope.row['busiType'])}}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="code" label="合同编码" width="120"></el-table-column>
        <el-table-column align="center" prop="merchantCode" label="商家编码" width="120"></el-table-column>
        <el-table-column align="center" prop="merchantName" label="商家名称" width="120"></el-table-column>
        <el-table-column align="center" prop="type" label="合同属性" width="120">
          <template slot-scope="scope">
             {{formatType(scope.row,null,scope.row['type'])}}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="startTime" label="生效开始时间" width="120"></el-table-column>
        <el-table-column align="center" prop="endTime" label="生效结束时间" width="120"></el-table-column>
        <el-table-column align="center" prop="tradeCurrency" label="交易币别" width="120">
          <template slot-scope="scope">
             {{formatTradeCurrency(scope.row,null,scope.row['tradeCurrency'])}}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="status" label="状态" width="120">
          <template slot-scope="scope">
             {{formatStatus(scope.row,null,scope.row['status'])}}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="createTime" label="制单时间" width="120"></el-table-column>
        <el-table-column align="center" prop="createrName" label="制单人" width="120"></el-table-column>
        <el-table-column align="left" fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <kt-button
              type="text"
              size="mini"
              @click="handleDetail(scope.row)"
              label="编辑"
            />
            <kt-button
              type="text"
              size="mini"
              @click="handleDelete(scope)"
              label="删除"
            />
          </template>
        </el-table-column>
        </el-table>
        <div class="t_r">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageRequest.pageNum"
            :page-sizes="[10, 20, 50, 100 ,300 , 500]"
            :page-size="pageRequest.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="filters.res.total"
          ></el-pagination>
        </div>
    <!--新增编辑界面-->
    <el-dialog
      title="选择供应商"
      width="55%"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      @closed="handleClose"
    >
      <el-form
        :model="supplierDataForm"
        label-width="120px"
        ref="supplierDataForm"
        :size="size"
        label-position="right"
        inline
      >
        <el-row class="search-input">
          <el-form-item label="供货商助记码：" prop="supplierCode">
            <el-input v-model="supplierDataForm.supplierMnemonicCode" auto-complete="off" placeholder="请输入供货商助记码" clearable></el-input>
          </el-form-item>
          <el-form-item label="供应商名称：" prop="supplierName">
            <el-input v-model="supplierDataForm.supplierName" auto-complete="off" placeholder="请输入供应商名称" clearable></el-input>
          </el-form-item>
        </el-row>
        <el-row class="search-button">
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
              @click="findSupplierList()"
            />
          </el-form-item>
          <el-form-item>
            <kt-button
              icon="fa fa-refresh"
              :label="$t('action.reset')"
              @click="resetSupplier"
              type="primary"
            />
          </el-form-item>
        </el-row>
        <template>
          <el-table
            :data="tableData"
            border=""
            style="width: 100%"
            tooltip-effect="dark"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="supplierMnemonicCode" label="供货商助记码"></el-table-column>
            <el-table-column prop="supplierName" label="供应商名称"></el-table-column>
          </el-table>
          <div class="block" style="text-align: right;">
            <el-pagination
              :current-page="supplierDataForm.start"
              :page-sizes="[10, 20, 30, 50]"
              :page-size="supplierDataForm.limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="supplierDataForm.total"
            ></el-pagination>
          </div>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click="addContract()" type="primary">确认</el-button>
        <el-button :size="size" @click.native="dialogVisible = false">{{$t('action.cancel')}}</el-button>
      </div>
    </el-dialog>
    <!--合同详情页面-->
    <el-dialog
      :title="operation?'详情':'详情'"
      width="85%"
      :visible.sync="detailpage"
      :close-on-click-modal="false"
      @closed="handleClose"
    >
      <el-form
        :model="dataForm"
        label-width="120px"
        :rules="dataFormRules"
        ref="dataForm"
        :size="size"
        label-position="right"
        inline
      >
        <el-form-item label="ID：" prop="id" v-if="false">
          <el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
        </el-form-item>
        <el-row class="search-input">
            <el-form-item label="合同名称：" prop="name">
              <el-input v-model="dataForm.name" required placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="业务编码：" prop="busiCode">
              <el-input v-model="dataForm.busiCode" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="合同编码：" prop="code">
              <el-input v-model="dataForm.code" :disabled="true" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="商家编码：" prop="merchantCode">
              <el-input v-model="dataForm.merchantCode" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="商家名称：" prop="merchantName">
              <el-input v-model="dataForm.merchantName" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="合同属性：" prop="type">
              <el-select placeholder="请选择" v-model="dataForm.type" size="mini">
                <el-option label="自采合同" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="生效开始时间：" prop="startTime">
              <el-date-picker v-model="dataForm.startTime" type="date" placeholder="生效开始时间"></el-date-picker>
            </el-form-item>
            <el-form-item label="生效结束时间：" prop="endTime">
              <el-date-picker v-model="dataForm.endTime" type="date" placeholder="生效结束时间"></el-date-picker>
            </el-form-item>
            <el-form-item label="交易币别：" prop="tradeCurrency">
              <el-select placeholder="请选择" v-model="dataForm.tradeCurrency" size="mini">
                <el-option label="人名币" value="CNY"></el-option>
                <el-option label="美元" value="USD"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="状态：" prop="status">
              <el-select placeholder="请选择" v-model="dataForm.status" size="mini">
                <el-option label="有效" value="0"></el-option>
                <el-option label="无效" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="供应商编码：" prop="supplierCode">
              <el-input v-model="dataForm.supplierCode" :disabled="true" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="供应商名称：" prop="supplierName">
              <el-input v-model="dataForm.supplierName" :disabled="true" placeholder="请输入"></el-input>
            </el-form-item>
        </el-row>
        <template>
          <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
            <!-- 基本信息 -->
            <el-tab-pane label="基本信息" name="1">
              <el-row>
                <el-checkbox v-model="checked" @change="onchange">外贸合同</el-checkbox>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="生效日期：" prop="number">
                    <el-date-picker
                      v-model="filters.startDate"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="生效日期"
                      style="width:200px"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="失效日期：" prop="remark">
                    <el-date-picker
                      v-model="filters.startDate"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="失效日期"
                      style="width:200px"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-checkbox v-model="checked1" @change="onchangeType">指定合同商品类目</el-checkbox>
              </el-row>
              <!-- 财务信息 -->
              <el-divider></el-divider>
              <el-row>
                <el-span>财务信息</el-span>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="结算方式：" prop="number">
                    <el-select style="width:200px">
                      <el-option label="账期结算" value="1">账期结算</el-option>
                      <el-option label="账期结算" value="1">账期结算</el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="付款账期：" prop="number">
                    <el-select style="width:200px">
                      <el-option label="日账期" value="1">日账期</el-option>
                      <el-option label="月账期" value="1">月账期</el-option>
                      <el-option label="年账期" value="1">年账期</el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="支持开票：" prop="number">
                    <el-radio v-model="radio" label="1">允许</el-radio>
                    <el-radio v-model="radio" label="2">不允许</el-radio>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="支持专票：" prop="number">
                    <el-radio v-model="radio" label="3">备选项</el-radio>
                    <el-radio v-model="radio" label="4">不允许</el-radio>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- 外贸信息 -->
              <el-row v-if="foreignTrade" style="text-align:center">
                <el-divider></el-divider>
                <el-row style="text-align:left">
                  <el-span>外贸信息</el-span>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="结算货币：" prop="number">
                      <el-select style="width:200px">
                        <el-option label="账期结算" value="1">账期结算</el-option>
                        <el-option label="账期结算" value="1">账期结算</el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="贸易方式：" prop="number">
                      <el-select style="width:200px">
                        <el-option label="日账期" value="1">日账期</el-option>
                        <el-option label="月账期" value="1">月账期</el-option>
                        <el-option label="年账期" value="1">年账期</el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="成交方式：" prop="number">
                      <el-select style="width:200px">
                        <el-option label="工厂交货（EXW）" value="1">工厂交货（EXW）</el-option>
                        <el-option label="边境交货(DAF)" value="1">边境交货(DAF)</el-option>
                        <el-option label="目的港船上交货(DES)" value="1">目的港船上交货(DES)</el-option>
                        <el-option label="目的港码头交货(DEQ)" value="1">目的港码头交货(DEQ)</el-option>
                        <el-option label="未完税交货(DDU)" value="1">未完税交货(DDU)</el-option>
                        <el-option label="完税后交货(DDP)" value="1">完税后交货(DDP)</el-option>
                        <el-option label="货交承运人（FCA）" value="1">货交承运人（FCA）</el-option>
                        <el-option label="船边交货（FAS)" value="1">船边交货（FAS)</el-option>
                        <el-option label="船上交货（FOB）" value="1">船上交货（FOB）</el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="运输方式：" prop="number">
                      <el-select style="width:200px">
                        <el-option label="海运" value="1">海运</el-option>
                        <el-option label="多式联运" value="1">多式联运</el-option>
                        <el-option label="空运" value="1">空运</el-option>
                        <el-option label="铁路" value="1">铁路</el-option>
                        <el-option label="公路" value="1">公路</el-option>
                        <el-option label="内河" value="1">内河</el-option>
                        <el-option label="专递或邮寄" value="1">专递或邮寄</el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="装运港：" prop="number">
                      <el-select style="width:200px">
                        <el-option label="账期结算" value="1">账期结算</el-option>
                        <el-option label="账期结算" value="1">账期结算</el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="抵运港：" prop="number">
                      <el-select style="width:200px">
                        <el-option label="日账期" value="1">日账期</el-option>
                        <el-option label="月账期" value="1">月账期</el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-row>
              <el-row v-if="types" style="text-align:center">
                <el-divider></el-divider>
                <el-row style="text-align:left">
                  <el-span>商品类目</el-span>
                </el-row>
                <el-row>
                  <el-col :span="6">
                    <el-form-item>
                      <el-checkbox v-model="a">营养辅食</el-checkbox>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item>
                      <el-checkbox v-model="b">母婴用品</el-checkbox>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item>
                      <el-checkbox v-model="d">早教玩具</el-checkbox>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item>
                      <el-checkbox v-model="c">食品</el-checkbox>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="6">
                    <el-form-item>
                      <el-checkbox v-model="a">臻选图书</el-checkbox>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item>
                      <el-checkbox v-model="b">宝宝日用</el-checkbox>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item>
                      <el-checkbox v-model="d">箱包</el-checkbox>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item>
                      <el-checkbox v-model="c">化妆品</el-checkbox>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-row>
              <el-row>
                <el-form-item label="备注：" prop="remark">
                  <el-input type="textarea" v-model="filters.remark" style="width:1000px"></el-input>
                </el-form-item>
              </el-row>
              <el-row style="text-align:center">
                <el-form-item>
                  <kt-button
                    icon="fa fa-save"
                    label="保存"
                    type="primary"
                    @click="findPage(filters)"
                  />
                </el-form-item>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="费用信息" name="2">
              <el-row class="t_r">
                 <el-button :size="size" @click="confim" type="primary">删除所选费用类型</el-button>
                <el-button :size="size" @click="addprice" type="primary">添加费用类型</el-button>
              </el-row>
              <template>
                <el-table :data="tableDataprice" border="" style="width: 100%">
                  <el-table-column type="selection" width="55"></el-table-column>
                  <el-table-column prop="1" label="费用类型编码" width="180"></el-table-column>
                  <el-table-column prop="2" label="费用类型名称" width="180"></el-table-column>
                  <el-table-column prop="3" label="计费周期"></el-table-column>
                  <el-table-column prop="4" label="计费基准"></el-table-column>
                  <el-table-column prop="5" label="计费方式"></el-table-column>
                  <el-table-column prop="6" label="生成费用单方式"></el-table-column>
                  <el-table-column prop="7" label="审核方式"></el-table-column>
                  <el-table-column prop="8" label="是否设置保底金额"></el-table-column>
                  <el-table-column prop="9" label="保底金额"></el-table-column>
                  <el-table-column prop="10" label="费用金额(元)"></el-table-column>
                  <el-table-column prop="11" label="计费比率"></el-table-column>
                  <el-table-column prop="12" label="	备注"></el-table-column>
                  <el-table-column prop="13" label="	阶梯费用"></el-table-column>
                </el-table>
              </template>
            </el-tab-pane>
            <el-tab-pane label="合同附件" name="3">
              <el-row class="t_r">
                 <el-button :size="size" @click="uploadfile" type="primary">上传合同附件</el-button>
                 <el-button :size="size" @click="handleDelete" type="primary">删除</el-button>
              </el-row>
              <template>
                <el-table border="" style="width: 100%">
                  <el-table-column type="selection" width="55"></el-table-column>
                  <el-table-column prop="1" label="合同附件" width="180"></el-table-column>
                  <el-table-column prop="2" label="上载人" width="180"></el-table-column>
                  <el-table-column prop="3" label="时间"></el-table-column>
                </el-table>
              </template>
            </el-tab-pane>
            <el-tab-pane label="查看合同协议" name="4">
              <el-row class="t_r">
                 <el-button :size="size" @click="addprotocol" type="primary">新增合同模板</el-button>
              </el-row>
              <template>
                <el-table :data="tableDataprotocol" border="" style="width: 100%">
                  <el-table-column prop="1" label="合同类型" width="180"></el-table-column>
                  <el-table-column prop="2" label="模板编号" width="180"></el-table-column>
                  <el-table-column prop="3" label="版本号"></el-table-column>
                  <el-table-column prop="4" label="模板名称"></el-table-column>
                  <el-table-column prop="5" label="模板附件"></el-table-column>
                  <el-table-column prop="6" label="上载人"></el-table-column>
                  <el-table-column prop="7" label="上载时间"></el-table-column>
                  <el-table-column prop="8" label="备注"></el-table-column>
                  <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                      <el-button @click="addprotocol" type="text" size="small">编辑</el-button>
                      <el-button type="text" size="small" @click="handleDelete">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-tab-pane>
            <el-tab-pane label="操作日志" name="5">
              <template>
                <el-table :data="tableDatapeople" border="" style="width: 100%">
                  <el-table-column prop="1" label="操作用户ID" width="180"></el-table-column>
                  <el-table-column prop="2" label="操作人" width="180"></el-table-column>
                  <el-table-column prop="3" label="操作时间"></el-table-column>
                  <el-table-column prop="4" label="操作"></el-table-column>
                  <el-table-column prop="5" label="备注"></el-table-column>
                </el-table>
              </template>
            </el-tab-pane>
            <el-tab-pane label="联系人" name="6">
              <el-row class="t_r">
                 <el-button :size="size" @click="addlink" type="primary">新增联系人</el-button>
              </el-row>
              <template>
                <el-table :data="tableDatalink" border="" style="width: 100%">
                  <el-table-column prop="1" label="联系人" width="180"></el-table-column>
                  <el-table-column prop="2" label="联系人职位" width="180"></el-table-column>
                  <el-table-column prop="3" label="联系人固定电话"></el-table-column>
                  <el-table-column prop="4" label="联系人手机"></el-table-column>
                  <el-table-column prop="5" label="联系人Email"></el-table-column>
                  <el-table-column prop="6" label="联系地址"></el-table-column>
                  <el-table-column prop="7" label="主要联系人"></el-table-column>
                  <el-table-column prop="8" label="备注"></el-table-column>
                  <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                      <el-button @click="handleDelete" type="text" size="small">删除</el-button>
                      <el-button type="text" size="small" @click="editLink">编辑</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-tab-pane>
            <el-tab-pane label="店铺信息" name="7">
              <el-row class="t_r">
                 <el-button :size="size" @click="addshop" type="primary">添加店铺组织</el-button>
              </el-row>
              <template>
                <el-table :data="tableDatashop" border="" style="width: 100%">
                  <el-table-column prop="1" label="店铺编码" width="180"></el-table-column>
                  <el-table-column prop="2" label="店铺名称" width="180"></el-table-column>
                  <el-table-column prop="3" label="店铺类型"></el-table-column>
                  <el-table-column prop="4" label="店铺地址"></el-table-column>
                  <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                      <el-button @click="handleDelete" type="text" size="small">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-tab-pane>
          </el-tabs>
        </template>
        <!-- <el-row style="text-align:center">
				<el-form-item>
					<kt-button icon="fa fa-search" :label="$t('action.search')"  type="primary" @click="findPage(filters)"/>
				</el-form-item>
				<el-form-item>
					<kt-button icon="fa fa-refresh" :label="$t('action.reset')"  @click="reset" type="primary"/>
				</el-form-item>
				
        </el-row>-->
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click="updateContract" type="primary">确认</el-button>
        <!-- <el-button :size="size" @click="deleteinfo" type="primary">删除</el-button> -->
        <el-button :size="size" @click.native="detailpage = false">{{$t('action.cancel')}}</el-button>
      </div>
    </el-dialog>
    <!-- 添加费用弹框 -->
    <el-dialog
      :title="operation?'新增':'编辑'"
      width="35%"
      :visible.sync="priceModal"
      :close-on-click-modal="false"
      @closed="handleClose"
    >
      <el-form
        :model="dataForm"
        label-width="80px"
        :rules="dataFormRules"
        ref="dataForm"
        :size="size"
        label-position="right"
        inline
      >
        <el-form-item label="ID：" prop="id" v-if="false">
          <el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
        </el-form-item>
        <el-row>
          <el-form-item label="一级费用类型：" prop="number">
            <!-- <el-input v-model="dataForm.number"  auto-complete="off"></el-input> -->
            <el-select>
              <el-option label="一级费用类型">一级费用类型</el-option>
              <el-option label="一级费用类型">一级费用类型</el-option>
              <el-option label="一级费用类型">一级费用类型</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="计费周期" prop="remark">
            <el-select>
              <el-option label="按月">按月</el-option>
              <el-option label="按季度">按季度</el-option>
              <el-option label="按年">按年</el-option>
              <el-option label="一次性费用">一次性费用</el-option>
              <el-option label="手动创建">手动创建</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="计费方式" prop="remark">
            <el-select>
              <el-option label="固定比例">固定比例</el-option>
              <el-option label="固定金额">固定金额</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="计费基准" prop="remark">
            <el-select>
              <el-option label="销售额">销售额</el-option>
              <el-option label="销售成本">销售成本</el-option>
              <el-option label="进退货金额">进退货金额</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="生成费用单方式" prop="remark">
            <el-select>
              <el-option label="自动生成">自动生成</el-option>
              <el-option label="手动生成">手动生成</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="审核方式" prop="remark">
            <el-select>
              <el-option label="自动审核">自动审核</el-option>
              <el-option label="手动审核">手动审核</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="计费比率" prop="remark">
            <el-input v-model="dataForm.remark" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="设置保底金额" prop="remark">
            <el-radio v-model="radio" label="1">是</el-radio>
            <el-radio v-model="radio" label="2">否</el-radio>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="dataForm.remark" auto-complete="off"></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click="confim" type="primary">确认</el-button>
        <el-button :size="size" @click.native="priceModal = false">{{$t('action.cancel')}}</el-button>
      </div>
    </el-dialog>
    <!-- 上传弹框 -->
    <el-dialog
      title="上传合同附件"
      width="35%"
      :visible.sync="uploadModal"
      :close-on-click-modal="false"
      @closed="handleClose"
    >
      <el-form
        :model="dataForm"
        label-width="100px"
        :rules="dataFormRules"
        ref="dataForm"
        :size="size"
        label-position="right"
        inline
      >
        <el-row>
          <el-form-item label="请选择：">
            <el-input type="file"></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click="confim" type="primary">确认</el-button>
        <el-button :size="size" @click.native="uploadModal = false">{{$t('action.cancel')}}</el-button>
      </div>
    </el-dialog>
    <!-- 合同模板 -->
    <el-dialog
      :title="operation?'新增':'编辑'"
      width="65%"
      :visible.sync="condialogVisible"
      :close-on-click-modal="false"
      @closed="handleClose"
    >
      <el-form
        :model="dataForm"
        label-width="120px"
        :rules="dataFormRules"
        ref="dataForm"
        :size="size"
        label-position="right"
        inline
      >
        <el-form-item label="ID：" prop="id：" v-if="false">
          <el-input v-model="dataForm.id" :disabled="true" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-row class="search-input">
          <el-form-item label="模板编号：" prop="number">
            <el-input v-model="dataForm.number" auto-complete="off" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="商家：" prop="business">
            <!-- <el-input v-model="dataForm.business"  auto-complete="off" ></el-input> -->
            <el-select v-model="dataForm.business" placeholder="商家">
              <el-option label="录屏商家02" value="1">录屏商家02</el-option>
              <el-option label="育学园-商城" value="1">育学园-商城</el-option>
              <el-option label="张小二服饰" value="1">张小二服饰</el-option>
              <el-option label="育学园-商城" value="1">育学园-商城</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="模板分类：" prop="type">
            <el-input v-model="dataForm.type" auto-complete="off" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="模板名称：" prop="name">
            <el-input v-model="dataForm.remains" auto-complete="off" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="模板附件：" prop="template">
            <el-input v-model="dataForm.template" auto-complete="off" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="备注：" prop="remark">
            <el-input v-model="dataForm.remark" auto-complete="off" placeholder="请输入"></el-input>
          </el-form-item>
        </el-row>
        <el-row></el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="condialogVisible = false">{{$t('action.cancel')}}</el-button>
        <el-button
          :size="size"
          type="primary"
          @click.native="submitForm"
          :loading="editLoading"
        >{{$t('action.submit')}}</el-button>
      </div>
    </el-dialog>
    <!-- 联系人弹框 -->
    <el-dialog
      :title="operation?'新增':'编辑'"
      width="65%"
      :visible.sync="linkerModal"
      :close-on-click-modal="false"
      @closed="handleClose"
    >
      <el-form
        :model="dataForm"
        label-width="140px"
        :rules="dataFormRules"
        ref="dataForm"
        :size="size"
        label-position="right"
        inline
      >
        <el-form-item label="ID：" prop="id" v-if="false">
          <el-input v-model="dataForm.id" :disabled="true" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-row class="search-input">
          <el-form-item label="联系人：" prop="number">
            <el-input v-model="dataForm.number" auto-complete="off" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="联系人职位：" prop="business">
            <el-input v-model="dataForm.business" auto-complete="off" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="联系人固定电话：" prop="type">
            <el-input v-model="dataForm.type" auto-complete="off" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="联系人Email：" prop="name">
            <el-input v-model="dataForm.remains" auto-complete="off" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="联系地址：" prop="template">
            <el-input v-model="dataForm.template" auto-complete="off" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="备注：" prop="remark">
            <el-input v-model="dataForm.remark" auto-complete="off" placeholder="请输入"></el-input>
          </el-form-item>
        </el-row>
        <el-row></el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="linkerModal = false">{{$t('action.cancel')}}</el-button>
        <el-button
          :size="size"
          type="primary"
          @click.native="submitForm"
          :loading="editLoading"
        >{{$t('action.submit')}}</el-button>
      </div>
    </el-dialog>
    <!-- 店铺弹框 -->
    <el-dialog
      :title="operation?'新增':'编辑'"
      width="45%"
      :visible.sync="shopModal"
      :close-on-click-modal="false"
      @closed="handleClose"
    >
      <el-form
        :model="dataForm"
        label-width="140px"
        :rules="dataFormRules"
        ref="dataForm"
        :size="size"
        label-position="right"
        inline
      >
        <el-form-item label="ID：" prop="id" v-if="false">
          <el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
        </el-form-item>
        <el-row class="search-input">
          <el-form-item label="供应商编码：" prop="number">
            <el-input v-model="dataForm.number" auto-complete="off" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="供应商名称：" prop="remark">
            <el-input v-model="dataForm.remark" auto-complete="off" placeholder="请输入"></el-input>
          </el-form-item>
        </el-row>
        <el-row style="text-align:center">
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
              @click="findPage(filters)"
            />
          </el-form-item>
          <el-form-item>
            <kt-button
              icon="fa fa-refresh"
              :label="$t('action.reset')"
              @click="reset"
              type="primary"
            />
          </el-form-item>
        </el-row>
        <template>
          <el-table :data="tableDatashopmodal" border="" style="width: 100%">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="business" label="商家名称"></el-table-column>
            <el-table-column prop="shopname" label="店铺编码"></el-table-column>
            <el-table-column prop="shopname" label="店铺编码"></el-table-column>
            <el-table-column prop="shoptype" label="店铺类型"></el-table-column>
          </el-table>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click="confim" type="primary">提交</el-button>
        <el-button :size="size" @click.native="shopModal = false">{{$t('action.cancel')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>
<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import CyTable from "@/views/Core/CyTable";
import KtButton from "@/views/Core/KtButton";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import { format } from "@/utils/datetime";
import XLSX from "xlsx";
import axios from "axios";
import { exportExcel } from "@/utils/excel";
export default {
  components: {
    PopupTreeInput,
    CyTable,
    KtButton,
    TableColumnFilterDialog
  },
  data() {
    var checkStartTime = (rule, value, callback) => {
      if (value == null || typeof value == "undefined") {
        callback();
      }
      if (
        this.queryFiteris.startTimeEndDate == null ||
        typeof this.queryFiteris.startTimeEndDate == "undefined"
      ) {
        callback();
      }
      if (
        new Date(value).getTime() > new Date(this.queryFiteris.startTimeEndDate).getTime()
      ) {
        callback(new Error("开始时间不能大于结束时间"));
      }
      this.$refs.queryFiteris.clearValidate("startTimeEndDate");
      callback();
  };
  var checkEndTime = (rule, value, callback) => {
    if (value == null || typeof value == "undefined") {
      callback();
    }
    if (
      this.queryFiteris.startTimeStartDate == null ||
      typeof this.queryFiteris.startTimeStartDate == "undefined"
    ) {
      callback();
    }
    if (
      new Date(value).getTime() < new Date(this.queryFiteris.startTimeStartDate).getTime()
    ) {
      callback(new Error("结束时间不能小于开始时间"));
    }
    this.$refs.queryFiteris.clearValidate("startTimeStartDate");
    callback();
  };
  var endCheckStartTime = (rule, value, callback) => {
    if (value == null || typeof value == "undefined") {
      callback();
    }
    if (
      this.queryFiteris.endTimeEndDate == null ||
      typeof this.queryFiteris.endTimeEndDate == "undefined"
    ) {
      callback();
    }
    if (
      new Date(value).getTime() > new Date(this.queryFiteris.endTimeEndDate).getTime()
    ) {
      callback(new Error("开始时间不能大于结束时间"));
    }
    this.$refs.queryFiteris.clearValidate("endTimeEndDate");
    callback();
  };
  var endCheckEndTime = (rule, value, callback) => {
    if (value == null || typeof value == "undefined") {
      callback();
    }
    if (
      this.queryFiteris.endTimeStartDate == null ||
      typeof this.queryFiteris.endTimeStartDate == "undefined"
    ) {
      callback();
    }
    if (
      new Date(value).getTime() < new Date(this.queryFiteris.endTimeStartDate).getTime()
    ) {
      callback(new Error("结束时间不能小于开始时间"));
    }
    this.$refs.queryFiteris.clearValidate("endTimeStartDate");
    callback();
  };
    return {
      excelup: this.utils.getUpLoadHost(),
      size: "small",
      radio: "1",
      foreignTrade: false,
      types: false,
      shopModal: false,
      linkerModal: false,
      priceModal: false,
      checked: false,
      condialogVisible: false,
      uploadModal: false,
      checked1: false,
      document_license: "",
      activeName: "second",
      multipleSelection: [],
      filtersRules: {
        startTimeStartDate: [{ validator: checkStartTime, trigger: "change" }],
        startTimeEndDate: [{ validator: checkEndTime, trigger: "change" }],
        endTimeStartDate: [{ validator: endCheckStartTime, trigger: "change" }],
        endTimeEndDate: [{ validator: endCheckEndTime, trigger: "change" }],
      },
      statusOption: [
        {
          status: "",
          label: "请选择"
        },
        {
          status: "0",
          label: "有效"
        },
        {
          status: "1",
          label: "无效"
        }
      ],
      filters: {
        name: "",
        res: {
          total: 0,
          code: "0000",
          rows: [
          ]
        }
      },
      tableDataprice: [
        {
          1: "001",
          2: "三A费用类型",
          3: "按月",
          4: "销售额",
          5: "固定比例",
          6: "自动生成",
          7: "自动审核",
          8: "是",
          9: "111.00",
          10: "0.00",
          11: "0",
          12: "否",
          13: "否"
        }
      ],
      tableDataprotocol: [
        {
          1: "经销合同",
          2: "20190917155550",
          3: "V1",
          4: "经销合同模板",
          5: " 3.jpg",
          6: "merchant",
          7: "2019-09-17 15:55:50",
          8: "是"
        }
      ],
      tableDatapeople: [
        {
          1: "19090215374897",
          2: "superadmin",
          3: "2019-12-25 14:46:19",
          4: "添加合同原件",
          5: "是"
        },
        {
          1: "19090215374897",
          2: "superadmin",
          3: "2019-12-25 14:46:19",
          4: "添加合同原件",
          5: "是"
        },
        {
          1: "19090215374897",
          2: "superadmin",
          3: "2019-12-25 14:46:19",
          4: "添加合同原件",
          5: "是"
        }
      ],
      tableDatalink: [
        {
          1: "李四",
          2: "总经理",
          3: "13678945621",
          4: "13678945621",
          5: "13678945621@163.com",
          6: "上海美术学院",
          7: "张三"
        },
        {
          1: "李四",
          2: "总经理",
          3: "13678945621",
          4: "13678945621",
          5: "13678945621@163.com",
          6: "上海美术学院",
          7: "张三"
        },
        {
          1: "李四",
          2: "总经理",
          3: "13678945621",
          4: "13678945621",
          5: "13678945621@163.com",
          6: "上海美术学院",
          7: "张三"
        }
      ],
      tableDatashop: [
        {
          1: "jd_001",
          2: "京东店",
          3: "直营店",
          4: "上海美术学院"
        },
        {
          1: "jd_001",
          2: "京东店",
          3: "直营店",
          4: "上海美术学院"
        },
        {
          1: "jd_001",
          2: "京东店",
          3: "直营店",
          4: "上海美术学院"
        }
      ],
      tableDatashopmodal: [
        {
          business: "张小二服饰",
          shopnumber: "d_001",
          shopname: "京东店",
          shoptype: "	线上店铺"
        },
        {
          business: "张小二服饰",
          property: "d_001",
          shopname: "京东店",
          shoptype: "	线上店铺"
        },
        {
          business: "张小二服饰",
          property: "d_001",
          shopname: "京东店",
          shoptype: "	线上店铺"
        }
      ],
      value: 0,
      columns: [],
      tabJson: "",

      warehouselist: [],
      filterColumns: [],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {},
      dialogImageUrl: "",

      operation: false, // true:新增, false:编辑
      dialogVisible: false, // 新增编辑界面是否显示
      editLoading: false,
      printPage: false,
      dialogVisibleImage: false,
      detailpage: false,
      dataFormRules: {
        name: [{ required: true, message: "请输入合同名称", trigger: "blur" }],
        busiType: [
          { required: true, message: "请输入业务类型", trigger: "blur" }
        ],
        busiCode: [
          { required: true, message: "请输入业务编码；", trigger: "blur" }
        ],
        code: [{ required: true, message: "请输入合同编码", trigger: "blur" }],
        merchantCode: [
          {
            required: true,
            message: "请输入商家编码（采购单位）",
            trigger: "blur"
          }
        ],
        merchantName: [
          { required: true, message: "请输入商家名称", trigger: "blur" }
        ],
        type: [{ required: true, message: "请输入合同属性", trigger: "blur" }],
        startTime: [
          { required: true, message: "请输入生效开始时间；", trigger: "blur" }
        ],
        endTime: [
          { required: true, message: "请输入生效结束时间；", trigger: "blur" }
        ],
        tradeCurrency: [
          { required: true, message: "请输入交易币别", trigger: "blur" }
        ],
        status: [{ required: true, message: "请输入状态", trigger: "blur" }]
      },
      dataForm: {
        id: null,
        name: null,
        busiType: 3,
        busiCode: null,
        code: null,
        merchantCode: null,
        merchantName: null,
        type: null,
        startTime: null,
        endTime: null,
        createTime: null,
        creater: null,
        tradeCurrency: null,
        status: null,
        supplierCode: null,
        supplierName: null
      },
      queryFiteris: {
        id: null,
        name: null,
        busiType: 3,
        busiCode: null,
        code: null,
        merchantCode: null,
        merchantName: null,
        type: null,
        startTime: null,
        endTime: null,
        createTime: null,
        creater: null,
        tradeCurrency: null,
        status: null,
        supplierCode:'',
        supplierName: ''
      },
      deptData: [],
      deptTreeProps: {
        label: "name",
        children: "children"
      },
      roles: [],
      searchFilters: {
        deleteFlag: 0
      },
      tableHeaderList: [
        { prop: "name", label: "合同名称", minWidth: 120 },
        { prop: "supplierCode", label: "供应商编码", minWidth: 120 },
        { prop: "supplierName", label: "供应商名称", minWidth: 120 },
        { prop: "busiType", label: "业务类型", minWidth: 120 },
        { prop: "busiCode", label: "业务编码", minWidth: 120 },
        { prop: "code", label: "合同编码", minWidth: 120 },
        { prop: "merchantCode", label: "商家编码", minWidth: 120 },
        { prop: "merchantName", label: "商家名称", minWidth: 120 },
        { prop: "type", label: "合同属性", minWidth: 120 },
        { prop: "startTime", label: "生效开始时间", minWidth: 120 },
        { prop: "endTime", label: "生效结束时间", minWidth: 120 },
        { prop: "tradeCurrency", label: "交易币别", minWidth: 120 },
        { prop: "status", label: "状态", minWidth: 120 },
        { prop: "createTime", label: "制单时间", minWidth: 120 },
        { prop: "creator", label: "制单人", minWidth: 120 }
      ],
      tableList: [],
      tableData: [    //供应商列表
        {
          number: "20190922150928",
          business: "张小二服饰",
          contractattributes: "自采合同",
          tradingcurrency: "CNY",
          invalid: "无效",
          suppliernumber: "1911290006883258",
          suppliername: "美元供应商",
          effectivetime: "2019-10-11",
          timefailure: "2019-11-1",
          type: "正常合同",
          status: "暂停",
          numbered: "HT1910110000055740",
          creator: "13875977921"
        },
        {
          number: "20190922150928",
          business: "张小二服饰",
          contractattributes: "自采合同",
          tradingcurrency: "CNY",
          invalid: "无效",
          suppliernumber: "1911290006883258",
          suppliername: "美元供应商",
          effectivetime: "2019-10-11",
          timefailure: "2019-11-1",
          type: "正常合同",
          status: "暂停",
          numbered: "HT1910110000055740",
          creator: "13875977921"
        },
        {
          number: "20190922150928",
          business: "张小二服饰",
          contractattributes: "自采合同",
          tradingcurrency: "CNY",
          invalid: "无效",
          suppliernumber: "1911290006883258",
          suppliername: "美元供应商",
          effectivetime: "2019-10-11",
          timefailure: "2019-11-1",
          type: "正常合同",
          status: "暂停",
          numbered: "HT1910110000055740",
          creator: "13875977921"
        },
        {
          number: "20190922150928",
          business: "张小二服饰",
          contractattributes: "自采合同",
          tradingcurrency: "CNY",
          invalid: "无效",
          suppliernumber: "1911290006883258",
          suppliername: "美元供应商",
          effectivetime: "2019-10-11",
          timefailure: "2019-11-1",
          type: "正常合同",
          status: "暂停",
          numbered: "HT1910110000055740",
          creator: "13875977921"
        }
      ],
      supplierDataForm:{
        supplierCode: null,
        supplierName: null,
        start:1,
        limit: 10,
      },

      conCode:"",

      loading: false
    };
  },
  methods: {
    handleSizeChange(val){
      this.pageRequest.pageSize = val;
      this.findPage();
    },
    handleCurrentChange(val){
      this.pageRequest.pageNum = val;
      this.findPage();
    },
    // 获取分页数据
    findPage: function(data) {
      // this.$refs.CyTable.findPageStaticState(this.filters);
      this.loading = true;
      let this_ = this;
      if (this_.queryFiteris === undefined || this_.queryFiteris === null) {
        this_.queryFiteris = {};
      }
      // this_.dataForm.pageNum = data === null || data === undefined ? this.pageRequest.pageNum : data;
      this_.queryFiteris.pageSize = this.pageRequest.pageSize;
      this_.queryFiteris.pageNum = this.pageRequest.pageNum;

      this_.queryFiteris.supplierCode = this_.dataForm.supplierCode;

      this_.queryFiteris.supplierName = this_.dataForm.supplierName;


      this.utils.request.findPurchaseContractPage(this_.queryFiteris, function(
        res
      ) {
         this_.loading = false;
        if (res.code === "0000") {
          this_.filters.res.rows = res.data.rows;
          this_.filters.res.total = res.data.total;
          console.log(res.data);
          console.log(this_.tableData);
          // this_.totalSize = Number(res.data.total);
          this_.$refs.CyTable.findPageStaticState(this_.filters);
        } else {
          this_.tableData = [];
          this_.totalSize = 0;
        }
      });
    },
    addshop() {
      this.shopModal = true;
    },
    editLink() {
      this.linkerModal = true;
    },
    addlink() {
      this.linkerModal = true;
    },
    //合同模板新增
    addprotocol() {
      //查询供应商列表
      // this.utils.request.supplierInformationListPage(this.supplierDataForm,res=>{
        // this.tableData = res.data.rows;
        // this.supplierDataForm.total = res.data.total;
        this.condialogVisible = true;
      // })
    },
    //上传
    uploadfile() {
      this.uploadModal = true;
    },
    //费用信息新增
    addprice() {
      this.priceModal = true;
    },
    onchange(data) {
      if (data == true) {
        this.foreignTrade = true;
      } else {
        this.foreignTrade = false;
      }
    },
    onchangeType(data) {
      if (data == true) {
        this.types = true;
      } else {
        this.types = false;
      }
    },
    confim() {
      this.detailpage = false;
      this.dataForm = {};
      this.$message({ message: "操作成功", type: "success" });
    },
    handleDetail(row) {
      //contractEdit?contractCode=1599210104664&id=81
      this.$router.push(
        {
          path:"/contractEdit",
          query:{
            contractCode: row.code,
            id: row.id,
            edit:1,
            busiType:3
          }
        }
      )
      // let this_ = this;
      // this_.detailpage = true;
      // this_.utils.request.getPurchaseContractDetail(
      //   { id: params.row.id },
      //   function(res) {
      //     if (res.code === "0000") {
      //       this_.dataForm = res.data;
      //     } else {
      //       this_.$message({ message: "操作失败, " + data.msg, type: "error" });
      //     }
      //   }
      // );
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },

    //弹窗关闭方法
    handleClose() {
      this.$refs.dataForm.resetFields();
    },
    detailed() {
      this.$router.push({ path: "/Paje/DetailedMsg" });
    },
    //导出
    download() {
      this.$router.push({ path: "/Paje/DetailedMsg" });
    },
    // 批量删除
    handleDelete: function(data) {
      // var ids = "";
      // for (var i = 0; i < data.params.length; i++) {
      //   ids = ids + data.params[i].id + ",";
      // }
      // data.ids = ids;
      let param = {};
      param.ids = data.row.id
      this.utils.request.deletePurchaseContract(param, this.deleteInfoBack);
    },
    //删除callback
    deleteInfoBack(data) {
      if (data.code == "0000") {
        this.$message({ message: "操作成功", type: "success" });
      } else {
        this.$message({ message: "操作失败, ", type: "error" });
      }
      this.findPage();
    },

    //列表下载
    downloadExcel() {
      this.$confirm("确定下载列表文件?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let this_ = this;
          let fileName = "经销合同查询Excel";
          if (this_.filters === undefined || this_.filters === null) {
            this_.filters = {};
          }
          this_.filters.pageNum = this.pageRequest.pageNum;
          this_.filters.pageSize = Number.MAX_SAFE_INTEGER;
          //查询不分页，传类型值和删除标志值
          this.utils.request.findPurchaseContractPage(
            this_.searchFilters,
            function(res) {
              if (res.code === "0000" && res.data.rows.length < 10000) {
                this_.tableList = res.data.rows;
                this_.totalSize = Number(res.data.total);
              } else {
                this_.$message({
                  message: "没有数据或者数据量超过1万笔,请添加筛选条件后重试",
                  type: "error"
                });
              }
            }
          );

          exportExcel(this_.tableList, this.tableHeaderList, fileName);
          this_.findPage(null);
        })
        .catch(() => {});
    },
    // 显示新增界面
    handleAdd: function() {
      this.operation = true;
      this.dataForm.id = "";
      //this.dataForm={};
      if (this.$refs["dataForm"] != undefined) {
        this.$refs["dataForm"].resetFields();
      }
      this.dataForm.document_license = "";
      this.supplierDataForm.status = 1;
      this.utils.request.supplierInformationListPage(this.supplierDataForm,res=>{
        this.tableData = res.data.rows;
        this.supplierDataForm.total = res.data.total;
        this.dialogVisible = true;
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 新增合同
    addContract: function() {
      var selected = this.multipleSelection;
      if (selected.length > 1) {
        this.$message({ message: "单个合同只能选择单个供应商", type: "warning" });
        return false;
      } else {
        let params = {};
        (params.supplierCode = selected[0].supplierMnemonicCode),
          (params.supplierName = selected[0].supplierName),
          (params.code = new Date().getTime());
        params.busiCode = "JXD" + new Date().getTime();
        params.busiType = 3;
        params.type = 2;
        params.tradeCurrency = "CNY";
        params.status = 0;
        params.startTime = new Date();
        params.endTime = new Date();
        params.deleteFlag = 0;

        this.conCode = params.code;
        this.utils.request.addPurchaseContractInfo(params, this.editInfoBack);
      }
    },
    // 打印
    print: function() {
      this.printPage = true;
      this.operation = true;
    },
    reset: function() {
      this.queryFiteris = {};
      this.findPage(null);
    },

    // 显示编辑界面
    handleEdit: function(params) {
      console.log(params);
      this.dialogVisible = true;
      this.operation = false;
      var this_ = this;
      this.$nextTick(function() {
        this_.dataForm = Object.assign({}, params);
      });
      // var search={};
      // search.id=params.row.id
      // search.t="chargeCard";

      // this.utils.request.queryUserInfo(search,function(res){

      //     if(res.code == "0000"){
      // 		}else{
      // 			this_.$message({message: '获取产品信息异常', type: 'error'});
      // 		}

      // })
    },
    // 编辑
    submitForm: function() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            // 	                    var this_ = this;
            //                         this.editLoading = true
            //                         let params = Object.assign({}, this.dataForm)
            //                         params.t='chargeCard';
            //                         this.utils.request.editUserInfo(params,this.editInfoBack)
            this.$message({ message: "操作成功", type: "success" });
            this.dialogVisible = false;
          });
        }
      });
    },
    // 编辑
    updateContract: function() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            var this_ = this;
            this_.editLoading = true;
            let params = Object.assign({}, this.dataForm);
            this_.utils.request.editPurchaseContractInfo(
              params,
              this.editInfoBack
            );
          });
        }
      });
    },
    // 新增修改回调
    editInfoBack: function(data) {
      if (data.code == "0000") {
        //TODO 跳转
        this.$router.push({
          path: `/contractEdit`,
          query:{
            contractCode:this.conCode,
            id: data.data,
            busiType:3
          }
        },);
        // this.$message({ message: "操作成功", type: "success" });
      } else {
        this.$message({ message: "操作失败", type: "error" });
      }
      this.detailpage = false;
      this.findPage();
      this.dialogVisible = false;
      this.operation = false;
      this.editLoading = false;
    },
    //业务类型
    formatbusiType(row, column, cellValue, index) {
      if (cellValue == '1') {
        return "采购合同";
      } else if (cellValue == '3') {
        return "经销合同";
      } else if (cellValue == '2') {
        return "代销合同";
      }
    },
    formatTradeCurrency(row, column, cellValue, index) {
      if (cellValue == "CNY") {
        return "人名币";
      } else if (cellValue == "USD") {
        return "美元";
      }
    },
    formatType(row, column, cellValue, index) {
      if (cellValue == 1) {
        return "自采合同";
      }else if (cellValue == 3) {
        return "代销合同";
      }else if (cellValue == 2) {
        return "经销合同";
      }
    },
    formatStatus(row, column, cellValue, index) {
      if (cellValue == 0) {
        return "有效";
      } else if (cellValue == 1) {
        return "无效";
      }
    },
    // 时间格式化
    dateFormat: function(row, column, cellValue, index) {
      return format(row[column.property]);
    },

    // 处理表格列过滤显示
    displayFilterColumnsDialog: function() {
      this.$refs.tableColumnFilterDialog.setDialogVisible(true);
    },
    // 处理表格列过滤显示
    handleFilterColumns: function(data) {
      this.filterColumns = data.filterColumns;
      this.$refs.tableColumnFilterDialog.setDialogVisible(false);
    },
    // 处理表格列过滤显示
    initColumns: function() {
      let temp = [];
      this.columns = [
        // { prop: "number", label: "合同编码", minWidth: 120 },
        // { prop: "business", label: "商家名", minWidth: 120 },
        // { prop: "contractattributes", label: "合同属", minWidth: 120 },
        // { prop: "tradingcurrency", label: "交易币别", minWidth: 120 },
        // { prop: "invalid", label: "是否失效", minWidth: 120 },
        // { prop: "suppliernumber", label: "供应商编码", minWidth: 120 },
        // { prop: "suppliername", label: "供应商名称", minWidth: 120 },
        // { prop: "effectivetime", label: "合同生效时间", minWidth: 120 },
        // { prop: "timefailure", label: "合同失效时间", minWidth: 120 },
        // { prop: "type", label: "合同变更", minWidth: 120 },
        // { prop: "status", label: "履行状态", minWidth: 120 },
        // { prop: "numbered", label: "原合同编号", minWidth: 120 },
        // { prop: "creator", label: "制单人", minWidth: 120 }
        { prop: "name", label: "合同名称", minWidth: 120 },
        { prop: "supplierCode", label: "供应商编码", minWidth: 120 },
        { prop: "supplierName", label: "供应商名称", minWidth: 120 },
        {
          prop: "busiType",
          label: "业务类型",
          minWidth: 120,
          formatter: this.formatbusiType
        },
        { prop: "busiCode", label: "业务编码", minWidth: 120 },
        { prop: "code", label: "合同编码", minWidth: 120 },
        { prop: "merchantCode", label: "商家编码", minWidth: 120 },
        { prop: "merchantName", label: "商家名称", minWidth: 120 },
        {
          prop: "type",
          label: "合同属性",
          minWidth: 120,
          formatter: this.formatType
        },
        { prop: "startTime", label: "生效开始时间", minWidth: 120 },
        { prop: "endTime", label: "生效结束时间", minWidth: 120 },
        {
          prop: "tradeCurrency",
          label: "交易币别",
          minWidth: 120,
          formatter: this.formatTradeCurrency
        },
        {
          prop: "status",
          label: "状态",
          minWidth: 120,
          formatter: this.formatStatus
        },
        { prop: "createTime", label: "制单时间", minWidth: 120 },
        { prop: "createrName", label: "制单人", minWidth: 120 }
      ];
      $.each(this.columns, function(key, val) {
        temp.push(val);
      });
      this.filterColumns = temp;
    },



    //查询供应商
    findSupplierList(){
      
    },
    //重置
    resetSupplier(){
      if(this.$refs["supplierDataForm"] != null){
        this.$refs["supplierDataForm"].resetFields();
      }
      this.findSupplierList();
    }



  },
  mounted() {
    this.initColumns();
    this.findPage(null);
  }
};
</script>

<style scoped lang='scss'>
/deep/ .el-input__inner  {
      width: 200px;
}
 .el-form-item--mini.el-form-item,
 .el-form-item--small.el-form-item  {
      margin-bottom: 10px;
}
.t_r{
  margin: 5px 0px 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
  font-size: 18px;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>